<template>
  <div class="home" v-if="currentUser" v-fullheight>
    <top-header-one>
      <template #right><logout></logout></template>
      <div class="user">
        <div class="nick-name">{{ currentUser.nickName }}</div>
        <div class="job-no">{{ currentUser.jobNo }}</div>
      </div>
    </top-header-one>
    <div class="statistics">
      <div class="item item-1" @click="goMyProject()">
        <div class="number">{{ myProject.totalNo || 0 }}</div>
        <div>总项目数</div>
      </div>
      <div class="item item-2" @click="goMyProject(1)">
        <div class="number">{{ myProject.processingNo || 0 }}</div>
        <div>进行中项目</div>
      </div>
      <div class="item item-3" @click="goMyProject(0)">
        <div class="number">{{ myProject.preparationNo || 0 }}</div>
        <div>筹备期项目</div>
      </div>
      <div class="item item-4" @click="goMyProject(2)">
        <div class="number">{{ myProject.deliveryNo || 0 }}</div>
        <div>成果交付项目</div>
      </div>
    </div>
    <div class="module-list">
      <van-grid :gutter="1" :column-num="3">
        <template v-for="(item, key) in moduleList">
          <van-grid-item :key="key">
            <div class="module-item">
              <a href="javascript:;" @click="goto(item)">
                <div>
                  <img :src="require(`@/assets/images/${item.img}.png`)" alt="" />
                  <div>{{ item.name }}</div>
                </div>
              </a>
              <span class="number" v-if="item.key === 'wdlc'">{{ unfinishAmount ? unfinishAmount : 0 }}</span>
            </div>
          </van-grid-item>
        </template>
      </van-grid>
    </div>
    <div class="chooseMark" v-if="showChoose"></div>
    <div class="choosePanel" v-if="showChoose" @click="showHideChoosePane">
      <div class="Panel">
        <div class="module-item" v-for="item in chooseList" :key="item">
              <a href="javascript:;" @click="goto(item)">
                <div>
                  <img :src="require(`@/assets/images/${item.img}.png`)" alt="" />
                  <div>{{ item.name }}</div>
                </div>
              </a>
            </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component } from "vue-property-decorator";
import { Button, Popup, Grid, GridItem, Picker } from "vant";
import TopHeader from "@/components/TopHeader.vue";
import Copyright from "@/components/Copyright.vue";
import Base from "@/utils/base";
import Api from "@/api";
import TopHeaderOne from "@/components/TopHeaderOne.vue";
import Logout from "@/components/Logout.vue";
import Bpm from "@/api/bpm";

@Component({
  name: "Home",
  components: {
    TopHeader,
    Copyright,
    TopHeaderOne,
    Logout,
    VanButton: Button,
    VanPopup: Popup,
    VanGrid: Grid,
    VanGridItem: GridItem,
    VanPicker: Picker
  }
})
export default class Home extends Base {
  private myProject: any = {};
  private unfinishAmount = 0;
  private jumpTimer: any;
  private jumpToast: any;
  private showChoose = false;

  created() {
    this.$cPromise.all([this.getUnfinishAmount(), this.getMyProject()]);
  }

  logout() {
    this.$dialog
      .confirm({
        message: "是否要退出本系统"
      })
      .then(() => {
        this.$router.push({ name: "Login" });
      })
      .catch(() => {
        // undo
      });
  }

  /**
   * 获取bpm的待办流程数量
   */
  private async getUnfinishAmount() {
    const res: any = await Bpm.GetUnfinishAmount(this.currentUser.jobNo);
    if (res && res.state == 200) {
      this.unfinishAmount = Number(res.data);
    }
    return res;
  }

  /**
   * 项目数据看板
   */
  private async getMyProject() {
    const res = await Api.MyProject();
    if (res.code === 200) {
      this.myProject = res.data;
    }
    return res;
  }

  private goUrl(url: string) {
    let second = 3;
    const message = "<div><div>即将跳转到外部链接</div><div class='count-number'>#{second}#s</div></div>";
    this.jumpToast = this.$toast({
      type: "html",
      duration: 0,
      className: "go-url-toast",
      message: message.replace("#{second}#", `${second}`)
    });

    this.jumpTimer = setInterval(() => {
      second--;
      this.jumpToast.message = message.replace("#{second}#", `${second}`);
      if (second === 0) {
        clearInterval(this.jumpTimer);
        this.jumpToast.clear();
        location.href = url;
      }
    }, 1000);
  }

  /**
   * 点击模块的一些操作
   */
  private goto(item: any) {
    const url = typeof item.url === "function" ? item.url() : item.url;
    if (url) {
      if (item.jumpWaiting) {
        this.goUrl(url);
      } else {
        location.href = url;
      }
    } else {
      // 直接跳转路由
      this.$router.push(item.to);
    }
  }

  private goMyProject(status?: number) {
    this.$router.push({
      name: "MyProjects",
      query: {
        status: `${status !== void 0 ? status : ""}`
      }
    });
  }

  private getUnfinshedWorkLink() {
    const _return = localStorage.getItem("unfinshedWorkLink");
    return _return ? _return : "";
  }

  private beforeDestroy() {
    if (this.jumpToast !== void 0) {
      this.jumpToast.clear();
    }

    if (this.jumpTimer !== void 0) {
      clearInterval(this.jumpTimer);
    }
  }

  /**
   * 模块显示列表
   */
  get moduleList() {
    const _return: any[] = [
      { name: "我的流程", img: "home-0", to: "", url: this.getUnfinshedWorkLink, key: "wdlc", jumpWaiting: false },
      { name: "我的关注", img: "home-1", to: { name: "ProjectFocus" }, url: "", key: "wdgz", jumpWaiting: false },
      { name: "我的便签", img: "home-2", to: { name: "Note" }, url: "", key: "wdbq" },
      { name: "我的项目", img: "home-6", to: { name: "MyProjects" }, url: "", key: "wdxm" },
      { name: "我的团队", img: "home-4", to: { name: "Members" }, url: "", key: "wdtd" },
      { name: "我的专家", img: "home-5", to: { name: "Expert" }, url: "", key: "wdzj" },
      { name: "项目展示库", img: "home-8", to: { name: "projectList" }, url: "", key: "gfbz"},
      { name: "收费计算器", img: "home-9", to: "", url: "http://ccal.tongji-ec.com.cn:7071/website/sj_main.html", key: "sfjsq", jumpWaiting: true },
      { name: "标准规范", img: "home-7", to: "", url: this.showHideChoosePane, key: "gfbz"},
      //{ name: "环境标准", img: "home-7", to: "", url: "http://www.mee.gov.cn/ywgz/fgbz/bz", key: "hjbz", jumpWaiting: true },
      //{ name: "建标库", img: "home-8", to: "", url: "http://m.jianbiaoku.com", key: "jbk", jumpWaiting: true }
    ];
    return _return;
  }
  get chooseList() {
    const _return: any[] = [
      { name: "环境标准", img: "home-7", to: "", url: "http://www.mee.gov.cn/ywgz/fgbz/bz", key: "hjbz", jumpWaiting: true },
      { name: "建标库", img: "home-8", to: "", url: "http://m.jianbiaoku.com", key: "jbk", jumpWaiting: true }
    ];
    return _return;
  }

  private showHideChoosePane(){
    this.showChoose = !this.showChoose;
  }
}
</script>

<style lang="less" scoped>
.home {
  /deep/.top-bar {
    position: absolute;
    right: 0;
    top: 0;
  }
  .user {
    text-align: center;
    color: white;
  }

  .nick-name {
    font-weight: 450;
    padding-top: 18px;
    font-size: 20px;
    margin-bottom: 2px;
  }

  .statistics {
    display: flex;
    // padding: 0 6px;
    padding-top: 5px;
    padding-bottom: 12px;
    justify-content: center;
    // align-items: center;
    height: 43px;
    background: white;
    .item {
      padding: 0 12px;
      text-align: center;
      position: relative;
      font-size: 13px;
      color: #33476f;
      &::after {
        content: "";
        position: absolute;
        height: 15px;
        border-right: 1px solid #f3f4f8;
        bottom: 0;
        right: 0;
      }
      &:last-child::after {
        border-right: 0;
      }
    }
    .number {
      font-size: 22px;
      font-family: "DINAlternateBold";
    }

    .item-2 {
      .number {
        color: #2ea38d;
      }
    }
    .item-3 {
      .number {
        color: #ff9b44;
      }
    }
    .item-4 {
      .number {
        color: #e85258;
      }
    }
  }

  .module-list {
    margin-top: 10px;
    margin-bottom: 4px;
    display: flex;
    flex-wrap: wrap;
    // 高度固定，区域滚动
    // max-height: calc(100vh - 145px);
    overflow: auto;
    align-content: baseLine;
    text-align: center;

    /deep/.van-grid-item__content--center {
      padding: 0;
    }

    .module-item {
      width: 100%;
      position: relative;
    }

    .number {
      text-align: center;
      font-size: 11px;
      width: 35px;
      height: 16px;
      line-height: 16px;
      background: rgba(207, 54, 54, 0.14);
      border-radius: 0px 0px 0px 10px;
      color: #cf3636;
      position: absolute;
      right: 0;
      top: 0;
    }

    a {
      color: #33476f;
      height: 112px;
      width: 100%;
      background-color: white;
      margin-top: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      &:active {
        opacity: 0.7;
      }

      img {
        height: 52px;
        width: 52px;
        margin: 0 auto;
        margin-bottom: 3px;
      }
    }
  }
}
.chooseMark{
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: #CCC;
  opacity: 0.5;
  left: 0;
  top: 0;
  z-index: 1000;
}
.choosePanel{
  position: absolute;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  background-color: transparent;
  z-index: 1001;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Panel{
  background-color: #FFF;
  border-radius: 10px;
  border: 1px solid #CCC;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 70vw;
  overflow: hidden;

    .module-item {
      width: 35vw;
      position: relative;
    }

    .number {
      text-align: center;
      font-size: 11px;
      width: 35px;
      height: 16px;
      line-height: 16px;
      background: rgba(207, 54, 54, 0.14);
      border-radius: 0px 0px 0px 10px;
      color: #cf3636;
      position: absolute;
      right: 0;
      top: 0;
    }

    a {
      color: #33476f;
      height: 112px;
      width: 100%;
      background-color: white;
      margin-top: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      &:active {
        opacity: 0.7;
      }

      img {
        height: 52px;
        width: 52px;
        margin: 0 auto;
        margin-bottom: 3px;
      }
    }
}
</style>

<style lang="less">
.go-url-toast {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 18px 32px;
  .count-number {
    font-size: 22px;
    margin-top: 12px;
  }
}
</style>
